<template>
    <layout :showHeader="false" :contentPadding="'0'">
        <div class="suer-content">
            <div class="suer-header">
                <div class="suer-header-setup text-tr">
                    <van-image @click="onRouter" width="5.333333vw" height="5.333333vw" fit="cover" :src="setupImage" />
                </div>
                <div class="suer-header-name display-flex">
                    <div class="suer-picture">
                        <van-image width="11.2vw" height="11.2vw" fit="cover" :src="pictureImage" />
                    </div>
                    <div class="header-name-content">
                        <div class="suer-name">张三 <span class="shop-image"><van-image width="10.266667vw" height="4.4vw"
                                    fit="cover" lazy-load :src="shop" /></span> </div>
                        <div class="suer-text">邀请码：JHANZM
                            <span class="suer-text-copy" @click="copyTextToClipboard('JHANZM')"><van-image
                                    width="2.933333vw" height="3.333333vw" fit="cover" lazy-load :src="copy" /></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shop-navigation">
                <div class="shop-navigation-title display-flex">
                    <div class="gation-title-icon"> <van-image width="4vw" height="4vw" fit="cover" lazy-load
                            :src="my_01" /></div> 靖诺预售
                </div>
                <product-navigation :menuList="menuList" :columnNum="4" imagewidth="6vw" @goRoute="goRoute" />
            </div>
            <div class="shop-navigation">
                <div class="shop-navigation-title display-flex">
                    <div class="gation-title-icon"> <van-image width="4vw" height="4vw" fit="cover" lazy-load
                            :src="my_02" /></div>
                    靖诺服务
                </div>
                <product-navigation :menuList="menuList2" :columnNum="4" imagewidth="6vw" />
            </div>
            <div class="user-button">
                <van-button round size="normal" block type="success"
                    color="linear-gradient(to right,#F07748, #ED1850)">退出登录</van-button>
            </div>
        </div>
    </layout>
</template>

<script setup>

import { ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router'

import layout from '@/components/Layout/index.vue'
import setupImage from '@image/User/setup.png'
import pictureImage from '@image/User/picture.png'
import copy from '@image/Cart/icon_01.png'
import shop from '@image/User/shop.png'

import ProductNavigation from '@/components/ProductNavigation/index.vue'

import user_01 from '@image/User/icon_01.png'
import user_02 from '@image/User/icon_02.png'
import user_03 from '@image/User/icon_03.png'
import user_04 from '@image/User/icon_04.png'
import user_05 from '@image/User/icon_05.png'
import user_06 from '@image/User/icon_06.png'
import user_07 from '@image/User/icon_07.png'
import user_08 from '@image/User/icon_08.png'

import my_01 from '@image/User/my_01.png'
import my_02 from '@image/User/my_02.png'

let menuList = ref([
    { name: '我的订单', path: '/Cart', image: user_01 },
    { name: '我的库存', path: '/MyInventory', image: user_02 },
    { name: '提货订单', path: '', image: user_03 },
    { name: '设置收款', path: '', image: user_04 },
])

let menuList2 = ref([
    { name: '我的店铺', path: '', image: user_05 },
    { name: '我的余额', path: '', image: user_06 },
    { name: '地址管理', path: '', image: user_07 },
    { name: '修改密码', path: '', image: user_08 },
])

let copyTextToClipboard = (text, name) => {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
            console.log(name + '文本已成功复制到剪切板！‌');
        }).catch(err => {
            console.error(name + '复制文本失败：‌', err);
        });
    } else {
        console.log('浏览器不支持剪切板API！‌');
    }
}


const router = useRouter();

const onRouter = () => {
    console.log('onRouter');
    router.push('/setupDetails')
}
let goRoute= (item)=>{
    router.push(item.path)
}
</script>

<style lang="scss" scoped>
.suer-content {
    height: 100%;
    background: linear-gradient(to bottom, #FFF7EA, #FFDBD6, #f5f5f5);position: relative;
}

.suer-header {
    height: 135px;
    position: relative;
    z-index: 10;
    padding: 20px;

    &::after {
        content: '';
        width: 500px;
        height: 135px;
        background-image: url('@image/User/JINGNUO_01.png');
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 35px;
        right: 20px;
        z-index: 1;
    }

    &::before {
        content: '';
        width: 500px;
        height: 135px;
        background-image: url('@image/User/JINGNUO_02.png');
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 44px;
        right: 23px;
        z-index: 2;
    }
}


.suer-header-setup {position: relative;z-index: 100000;
    height: 40px;
}

.suer-picture {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
}

.suer-text,
.suer-name {
    height: 42px;
    line-height: 42px;
}

.header-name-content {
    flex: 1;
    margin-left: 20px;
    position: relative;
    z-index: 20;
}

.suer-text-copy {
    padding: 0 20px;
}

.shop-image {
    width: 77px;
    height: 33px;
}

.shop-navigation {
    margin: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
}

.shop-navigation-title {
    padding: 10px 0;
    border-radius: 10px;
}
.gation-title-icon{width:30px;height: 30px;vertical-align: middle;margin-right: 10px;}
.user-button{height: 80px;width:710px;position: absolute;left: 0;bottom:40px;padding: 0 20px;}
</style>